<template>
    <view class="page-container">
        <view class="h-260  flex flex-col items-center justify-center bg-primary text-ff">
            <u-loading-icon mode="semicircle" color="#fff" v-if="loading"></u-loading-icon>
            <block v-else>
              <view class="font-40  mb-32">
                欢迎使用，请选择科目
              </view>
              <view class="font-30 font-bold mb-20" v-if="row.id">{{row.name}}</view>
              <view v-if="isotype<3  || isotype === 5">题目总数：{{count}}题 {{countNanme}}</view>
            </block>
        </view>
        <view class="page-body flex">
            <scroll-view scroll-y="true" class="w-200 bg-ee font-w700">
              <view v-for="(n,index) in list1" :key="n.id" @click="addItem(n,index,1)" class="px-12 py-28 flex items-center justify-between font-24 "
                    :class="{'bg-ff': active1 ===index,'bg-ff text-primary': row.id === n.id}">
                {{n.text}}
                <u-icon name="checkbox-mark" size="14" bold class="mr-6" color="#87ADFF" v-if="row.id === n.id"></u-icon>
              </view>
          </scroll-view>
          <scroll-view scroll-y="true" class="w-220 bg-f7 font-w700">
            <view v-for="(n,index) in list2" :key="n.id" @click="addItem(n,index,2)" class="px-12 py-28 flex items-center justify-between font-24"
                  :class="{'bg-ff': active2 ===index,'bg-ff text-primary': row.id === n.id}">
              {{n.text}}
              <u-icon name="checkbox-mark" size="14" bold class="mr-6" color="#87ADFF" v-if="row.id === n.id"></u-icon>
             </view>
          </scroll-view>
          <scroll-view scroll-y="true" class="flex-1 bg-ff font-w700">
            <view v-for="(n,index) in list3" :key="n.id" @click="addItem(n,index,3)" class="border-b border-f7 px-12 py-28 flex items-center justify-between font-24"
                  :class="{'text-primary': row.id === n.id}">
              {{n.text}}
              <u-icon name="checkbox-mark" size="14" bold class="mr-6" color="#87ADFF" v-if="row.id === n.id"></u-icon>
             </view>
          </scroll-view>
        </view>
        <view @click="submit" class="font-32 text-ff bg-primary flex items-center justify-center h-100" :class="{'bg-cc text-ff':count === 0}">确认</view>
    </view>
</template>
<script setup>
import { ref,computed } from 'vue'
import {onLoad} from "@dcloudio/uni-app"
import utils from '@/utils/utils.js'
import {subject} from '@/api'
import useUserStore from '@/store/user.js'
const useStore = useUserStore()
const isotype = ref('')
const loading = ref(false)
const active1 = ref(0)
const active2 = ref(0)
const list1 = ref([])
const list2 = ref([])
const list3 = ref([])
const list = ref([])
const row = ref({})
const count = ref(0)//题目总数
const orderCount = ref(0)//已做题目数量
const countNanme= computed(() => {
  if(isotype.value !== 5) return ''
  if(count.value===0) return ''
  if(count.value-orderCount.value>0){
    const num = count.value-orderCount.value
    return `(${num}题未做)`
  }
  if(count.value === orderCount.value) return '(已完成)'
})
onLoad((options) => {
    console.log(options)
    if (options.type) {
        isotype.value = Number(options.type)
    }
})
// 获取题目列表
const getQuestionList = async () => {
    loading.value = true
    const res = await subject.getSubjectList({uid: useStore.uid})
    if (res.code === 0) {
      list.value = res.data || []
      list1.value = res.data || []
        if(list1.value.length >0&&list1.value[0].children.length>0){
          list2.value = list1.value[0].children || []
          if(list2.value.length >0&&list2.value[0].children.length>0){
            list3.value = list2.value[0].children || []
          }
        }
    }
    setTimeout(() => {
        loading.value = false
    }, 500)
}
getQuestionList()
/**
 * 选择题目
 * @param item 题目对象
 * @param index 索引
 * @param type 题目类型
 */
const addItem = (item, index, type) => {
    if (type === 1) {
      // if(active1.value === index) return
        active1.value = index
        active2.value = 0
       if(item.children.length>0){
           list2.value = item.children || []
           if(list2.value.length >0&&list2.value[0].children.length>0){
             list3.value = list2.value[0].children || []
           }else {
             list3.value = []
           }
       }else {
           list2.value = []
           list3.value = []
       }
    } else if (type === 2) {
        // if(active2.value === index) return
        active2.value = index
        if(item.children.length>0){
            list3.value = item.children || []
        }
    }else if(type === 3){
    }
    row.value = item
    getCount(item.id)
}
/**
 * 获取题目总数
 * @param id
 * @returns {Promise<void>}
 */
const getCount = async (id) => {
  loading.value = true
  const res =  await subject.getSubjectCount({uid: useStore.uid,cateid:id})
  if (res.code === 0) {
    count.value = res.count || 0
    orderCount.value = 0
    await getStorageApi(id)
  }
  setTimeout(() => {
    loading.value = false
  }, 500)
}
//获取接口缓存的记录
const getStorageApi = async (id) => {
  const res = await subject.getSubjectPracticeList({
    userId: Number(useStore.uid),
    categoryId: Number(id),
  })
  if (res.code === 0) {
    const obj = res.data.find(item => item.storageKey === "order2")
    const arr = JSON.parse(obj?.storageValue || '[]')
    if (obj&&arr&&arr.length !==0) {
      orderCount.value = Object.keys(arr).length
    }
  }
}
/**
 * 提交
 */
const submit = async () => {
    if(count.value === 0) return
    if(isotype.value === 5){
        return uni.redirectTo({
          url: `/pages/template/index?categoryId=${row.value.id}&type=1`
          // url: `/pages/index/SimulatedExam/grades?categoryId=${row.value.id}&type=${isotype.value}`
        })
    }
    if(isotype.value >2){
        return uni.redirectTo({
          url: `/pages/index/practice/info?categoryId=${row.value.id}&type=${isotype.value}`
        })
    }
    if (row.value.id&&count.value>0) {
      uni.navigateTo({
        url: `/pages/template/index?categoryId=${row.value.id}&type=${isotype.value}`
      })
    }
}
</script>
<style scoped lang="scss">
</style>